<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect">{{getTranslatedTitle(item)}}</span>
        <a v-else @click.prevent="handleLink(item)">{{getTranslatedTitle(item)}}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>
<script>
export default {
  data() {
    return {
      levelList: null
    }
  },
  computed: {
    currentLanguage() {
      return this.$store.getters.language || 'zh'
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()
    },
    // 监听语言变化，重新渲染组件
    currentLanguage() {
      this.$forceUpdate()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        matched = [{ path: '/index', meta: { title: '首页' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim() === 'Index'
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(path)
    },
    /**
     * 获取翻译后的标题
     * 如果路由已经有翻译后的标题，直接使用；否则尝试实时翻译
     */
    getTranslatedTitle(route) {
      if (!route.meta || !route.meta.title) {
        return ''
      }
      const title = route.meta.title
      const chinesePattern = /[\u4e00-\u9fa5]/
      // 如果标题不包含中文字符，说明已经是翻译后的，直接返回
      if (!chinesePattern.test(title)) {
        return title
      }
      try {
        // 使用我们之前定义的菜单映射进行翻译
        const menuKeyMap = {
          '首页': 'system.homepage',
          '系统管理': 'system.systemManagement',
          '系统监控': 'system.systemMonitoring',
          '系统工具': 'system.systemTools',
          '用户管理': 'system.userManagement',
          '角色管理': 'system.roleManagement',
          '菜单管理': 'system.menuManagement',
          '权限管理': 'system.permissionManagement',
          '人员管理': 'system.personnelManagement',
          '字典管理': 'system.dictManagement',
          '参数设置': 'system.configManagement',
          '通知公告': 'system.noticeManagement',
          '日志管理': 'system.logManagement',
          '操作日志': 'system.operationLog',
          '登录日志': 'system.loginLog',
          '在线用户': 'system.onlineUsers',
          '定时任务': 'system.scheduledTasks',
          '数据监控': 'system.dataMonitoring',
          '服务监控': 'system.serviceMonitoring',
          '缓存监控': 'system.cacheMonitoring',
          '表单构建': 'system.formBuilder',
          '代码生成': 'system.codeGeneration',
          '系统接口': 'system.systemInterface',
          '智慧路灯': 'iot.smartStreetLight',
          '灯管理': 'iot.lightManagement',
          '灯杆管理': 'iot.lightPoleManagement',
          '显示屏': 'iot.displayScreen',
          '环境监测': 'iot.environmentMonitor',
          '项目管理': 'iot.projectManagement',
          '版本管理': 'iot.versionManagement',
          '监控列表': 'iot.monitoringList',
          '视频监控': 'iot.videoMonitoring',
          '节目管理': 'iot.programManagement',
          '智慧导览': 'iot.smartNavigation',
          '景点管理': 'iot.scenicSpotManagement',
          '广告管理': 'iot.advertiseManagement',
          '新闻管理': 'iot.newsManagement',
          '景区管理': 'iot.touristManagement',
          '设备列表': 'iot.deviceList',
          '智慧广播': 'iot.smartBroadcast',
          '太阳能灯': 'iot.solarLight',
          '音频设置': 'iot.audioSettings',
          '智慧传感': 'iot.smartSensor',
          '窗口设置': 'iot.windowset',
        }
        const key = menuKeyMap[title]
        if (key && this.$t) {
          const translated = this.$t(key)
          if (translated !== key) {
            return translated
          }
        }
      } catch (error) {
        console.warn('翻译菜单标题失败:', error)
      }
      // 如果翻译失败，返回原标题
      return title
    }
  }
}
</script>
<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>
